import React, { useState, useEffect, FC, useRef } from 'react'
import {
  Row, Col, Card,
  Progress,
  Collapse,
  Modal
} from 'antd'
import XlButtonFC from '@/components/xlbutton/xlbutton'
import XlModalFC from '@/components/xlmodal/xlmodal'
import { IData, IMonitorModal, IResponseCodeType, SplitPaneSize } from '@/models/common'
import { MailOutlinedIcon, TeamOutlinedIcon, UnorderedListOutlinedIcon } from '@/models/icons'
import util from '@/utils/util'
import * as api from '@/api'
import "./systeminfo.scss"


import { useAppSelector } from '@/store'




export interface IViewModel {
  width: number
  monitorData: IMonitorModal
  notAuth: boolean
}
const SystemInfo: FC = () => {
  const userInfo = useAppSelector((state) => state.login.userInfo)
  const [data, setData] = useState<IData<IViewModel>>({
    ViewModel: {
      width: (document.documentElement.clientWidth - SplitPaneSize.navBarSize * 2 - SplitPaneSize.sideBarSize) / 2,
      monitorData: {
        cpu: {
          total: 0,
          cpucore: 0,
          user: 0,
          temperature: 0,
        },
        mem: {},
        fs: [],
        network: [{
          rx: "",
          tx: ""
        }],
        version: {
          version_download: "",
          version_current: "",
          new_version: "",
        },
        system: {
          os: "",
          version: "",
          machine_name: "",
          run_time: "",
        },
        help: {
          about: "",
          qq: "",
          phone: "",
        }
      },
      notAuth: false
    }
  })

  useEffect(() => {
    
  }, [])

  const events = {
    onClickRefresh() {
      Modal.confirm({
        title: '更新',
        centered: true,
        closable: true,
        content: '升级后将自动重启服务器，确认要更新吗？',
        onOk() {
          return new Promise(async (resolve, reject) => {
            await methods.requestSystemUpgrade()
            resolve(null)
          }).catch(() => console.log('Oops errors!'))
        },
        onCancel() {

        },
      })
    },
  }

  const methods = {
    async requestMonitor(init: boolean) {
      const { ViewModel } = data
      let res = await api.common.getMonitor<IMonitorModal>(null)
      const { code, data: MonitorData, message } = res
      if (code == IResponseCodeType.Success) {
        ViewModel.monitorData = MonitorData
        if (init) {
          methods.createMemoryEcharts()
          methods.createNetWorkEcharts()
        }
      } else if (code == IResponseCodeType.NotAuth) {
        ViewModel.notAuth = true
      } else {
        util.alertTip(message)
      }
      setData({ ...data })
    },
    async requestSystemUpgrade() {
      const { ViewModel } = data
      let res = await api.common.systemUpgrade<null>({
        version: ViewModel.monitorData.version.version_download
      })
      const { code, message } = res
      util.alertTip(message)
      if (code == IResponseCodeType.Success) {
        methods.requestMonitor(false)
      }
    },
    createMemoryEcharts() {
    
    },
    createNetWorkEcharts() {
     
    },
    renderPage() {
      const { system, help, version, fs = [], cpu, network } = data.ViewModel.monitorData
      if (data.ViewModel.notAuth) {
        return null
      }
      return (
        <Card title="系统">
          <Row gutter={[16, 16]} className="systeminfo-card-wrapper">
            <Col span={12}>
              <Card title="系统信息">
                <Col className='system-content'>
                  <Row align='middle' className='system-item' wrap>
                    <Col className='text'>概览：</Col>
                    <Col className='value'>{userInfo.system_name}</Col>
                  </Row>
                  <Row align='middle' className='system-item' wrap>
                    <Col className='text'>平台：</Col>
                    <Col className='value'>{system.os}</Col>
                  </Row>
                  <Row align='middle' className='system-item' wrap>
                    <Col className='text'>版本：</Col>
                    <Col className='value'>{system.version}</Col>
                  </Row>
                  <Row align='middle' className='system-item' wrap>
                    <Col className='text'>主机名：</Col>
                    <Col className='value'>{system.machine_name}</Col>
                  </Row>
                  <Row align='middle' className='system-item' wrap>
                    <Col className='text'>运行时间：</Col>
                    <Col className='value'>{system.run_time}</Col>
                  </Row>
                  {
                    version.new_version ? <Row align='middle' className='system-update' justify='center' onClick={events.onClickRefresh}>
                      <XlButtonFC type='primary'>更新</XlButtonFC><XlButtonFC type='text'>新版本：{version.version_download}</XlButtonFC>
                    </Row> : null
                  }
                </Col>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="关于">
                <Col className='system-content'>
                  <Row align='middle' className='system-item' wrap>
                    <Row className='text'>
                      <UnorderedListOutlinedIcon />
                    </Row>
                    <Col className='value'>{help.about}</Col>
                  </Row>
                  <Row align='middle' className='system-item' wrap>
                    <Row className='text'>
                      <TeamOutlinedIcon />
                    </Row>
                    <Col className='value'>{help.qq}</Col>
                  </Row>
                  <Row align='middle' className='system-item' wrap>
                    <Row className='text'>
                      <MailOutlinedIcon />
                    </Row>
                    <Col className='value'>{help.phone}</Col>
                  </Row>
                </Col>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="处理器">
                <Col className='system-content'>
                  <Row align='middle' justify='space-between' className='processor'>
                    <Col span={12}>
                      <Progress type="circle" percent={cpu.total} />
                    </Col>
                    <Col span={12}>
                      <Row align='middle' className='system-item' wrap>
                        <Col className='text'>核心数：</Col>
                        <Col className='value'>{cpu.cpucore}</Col>
                      </Row>
                      <Row align='middle' className='system-item' wrap>
                        <Col className='text'>使用率：</Col>
                        <Col className='value'>{cpu.user}</Col>
                      </Row>
                      <Row align='middle' className='system-item' wrap>
                        <Col className='text'>温度：</Col>
                        <Col className='value'>{cpu.temperature}</Col>
                      </Row>
                    </Col>
                  </Row>
                </Col>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="内存">
                <Col className='system-content' id='memory-echarts' style={{ width: data.ViewModel.width }}> </Col>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="储存">
                <Col className='system-content'>
                  <Collapse activeKey={fs.map(o => o.device_name)} collapsible='header'>
                    {
                      fs.map(o => <Collapse.Panel header={<strong>{o.name}（{o.used}/{o.size}）</strong>} key={o.device_name} collapsible='header'>
                        <Row><Progress strokeLinecap="butt" percent={parseFloat(o.percent)} /></Row>
                      </Collapse.Panel>)
                    }
                  </Collapse>
                </Col>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="网络">
                <Col className='system-content'>
                  <Row>
                    <Col span={12}>
                      <Row align='middle' className='system-item' wrap>
                        <Col className='text'>接收：</Col>
                        <Col className='value'>{network[0].rx}</Col>
                      </Row>
                    </Col>
                    <Col span={12}>
                      <Row align='middle' className='system-item' wrap>
                        <Col className='text'>发送：</Col>
                        <Col className='value'>{network[0].tx}</Col>
                      </Row>
                    </Col>
                    {/* <Col span={12}>
                      <Row align='middle' className='system-item' wrap>
                        <Col className='text'>介质类型：</Col>
                        <Col className='value'>文档管理系统</Col>
                      </Row>
                    </Col>
                    <Col span={12}>
                      <Row align='middle' className='system-item' wrap>
                        <Col className='text'>IP地址：</Col>
                        <Col className='value'>10.20.20.17</Col>
                      </Row>
                    </Col> */}
                  </Row>

                  <Col id='network-echarts' style={{ width: data.ViewModel.width, height: 250 }}></Col>
                </Col>
              </Card>
            </Col>
          </Row>
        </Card>
      )
    }
  }
  return methods.renderPage()
}
export default SystemInfo
